<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			#btn {
				width: 320px;
				height: 102px;
				margin: 0 auto;
			}

			#btn a {
				display: inline-block;
				width: 100px;
				height: 100px;
				border: solid 1px plum;
				text-decoration: none;
				text-align: center;
				line-height: 100px;
				font-family: "微软雅黑";
				font-size: 30px;
			}

			#box {
				width: 320px;
				height: 300px;
				position: relative;
				margin: 0 auto;
			}

			ul li {
				width: 100%;
				height: 100%;
				display: none;
				border: solid 1px gold;
			}

			.active {
				display: block;
				background: skyblue;
			}
			.btn{
				width: 30px;
				height: 30px;
				border: solid 1px purple;
				border-radius: 50%;
				background: plum;
				font-family: "微软雅黑";
				font-size: 25px;
				text-align: center;
				position: absolute;
				top: 220px;
				cursor: pointer;
			}
			#left{
				left: 0px;
			}
			#right{
				right: 0px;
			}
		</style>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>

	<body>
		<div id="btn">
			<a href="javascript:;" class="active">选项一</a>
			<a href="javascript:;">选项二</a>
			<a href="javascript:;">选项三</a>
		</div>
		<ul id="box">
			<li class="active">这是第一个</li>
			<li>这是第二个</li>
			<li>这是第三个</li>
		</ul>
		<div id="left" class="btn"><</div>
		<div id="right" class="btn">></div>
		<script type="text/javascript">
			class Tab{
				constructor(btn,box){
					this.oBth = document.querySelector(btn);
					this.oBox = document.querySelector(box);
					this.oLeft = document.getElementById("left")
					this.oRight = document.getElementById("right")
					this.aBtn = this.oBth.querySelectorAll("a");
					this.aBox = this.oBox.querySelectorAll("li");
					this.index = 0;
					this.change();
				}
				change(){
					var _this = this;
					for (let i = 0;i<this.aBtn.length;i++) {
						_this.index = i;
						this.oLeft.onclick = function(){
							if(_this.index==0){
								_this.index=_this.aBtn.length;
							}
							_this.index--;
							_this.fn(_this.index);
						}
						this.oRight.onclick = function(){
							_this.index++;
							if(_this.index==_this.aBtn.length){
								_this.index=0;
							}
							_this.fn(_this.index);
						}
						this.aBtn[i].onclick = function(){
							_this.fn(i);
						}
					}
				}
				fn(i){
					for (var k = 0;k<this.aBtn.length;k++) {
						this.aBox[k].className = "";
						this.aBtn[k].className = "";
					}
					this.aBox[i].className = "active"
					this.aBtn[i].className = "active"
				}
			}
			window.onload = function(){
				new Tab("#btn","#box");
			}
		</script>
	</body>

</html>